<%--
  Created by IntelliJ IDEA.
  User: DCQ
  Date: 2025/3/6
  Time: 10:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" import="java.util.*"
         isELIgnored="false" %>
<%@ taglib prefix="rapid" uri="http://www.rapid-framework.org.cn/rapid" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<rapid:override name="title">权限</rapid:override>

<rapid:override name="head_extend">
    <link href="/static/admin_v1/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/static/admin_v1/css/addTable.css" rel="stylesheet"/>
    <!-- 分页查看 -->
    <link rel="stylesheet" type="text/css" href="/static/dataTable/jquery.dataTables.min.css">
    <script type="text/javascript" src="/static/dataTable/jquery.dataTables.min.js"></script>


    <style>
        /* 全局样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f0f2f5;
        }

        /* 内容容器 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 24px;
        }

        /* 搜索区域 */
        .search-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid #eee;
        }

        .search-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .search-item input,
        .search-item select {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 180px;
        }

        /* 操作按钮组 */
        .action-buttons {
            margin-bottom: 16px;
            display: flex;
            gap: 8px;
        }

        .action-buttons button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .btn-primary {
            background: #1890ff;
            color: white;
        }

        .btn-danger {
            background: #ff4d4f;
            color: white;
        }

        /* 数据表格 */
        .role-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 16px;
        }

        .role-table th,
        .role-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        .role-table th {
            background: #fafafa;
            color: rgba(0,0,0,0.85);
        }

        .role-table tr:hover {
            background: #fafafa;
        }

        /* 操作列样式 */
        .operation-cell a {
            color: #1890ff;
            text-decoration: none;
            margin-right: 12px;
        }

        .operation-cell a:hover {
            text-decoration: underline;
        }
    </style>
</rapid:override>

<rapid:override name="content">
    <div class="container">
        <!-- 搜索区域 -->
        <div class="search-bar">
            <div class="search-item">
                <span>权限名称：</span>
                <input type="text" placeholder="请输入角色名称">
            </div>
            <div class="search-item">
                <span>权限类别：</span>
                <input type="text" placeholder="请输入权限字符">
            </div>
            <div class="search-item">
                <span>创建时间：</span>
                <input type="date"> 至 <input type="date">
            </div>
            <div class="search-item">
                <span>权限状态：</span>
                <select>
                    <option value="">全部</option>
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                </select>
            </div>
            <button class="btn-primary">搜索</button>
            <button type="reset">重置</button>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
            <button class="btn-primary">添加</button>
            <button class="btn-primary">修改</button>
            <button class="btn-danger">删除</button>

        </div>

        <!-- 数据表格 -->
        <table class="role-table" id="example">
            <thead>
            <tr>
                <th>
                    <input type="checkbox">
                </th>
                <th>权限ID</th>
                <th>权限名称</th>
                <th>权限说明</th>
                <th>创建人</th>
                <th>修改人</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>

            <c:forEach items="${permissionList}" var="permission">
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>${permission.id}</td>
                    <td>${permission.permissionName}</td>
                    <td>${permission.remark}</td>
                    <td>${permission.user.userName}</td>
                    <td></td>
                    <td><fmt:formatDate value="${permission.createTime}" pattern="yyyy-MM-dd HH:mm"/></td>
                    <td class="operation-cell">
                        <a href="#">编辑</a>
                        <a href="/admin/permission/delete/${permission.id}">删除</a>
                            <%--<a href="#">更多操作</a>--%>
                    </td>
                </tr>

            </c:forEach>

            </tbody>
        </table>
    </div>

</rapid:override>

<rapid:override name="js_extend">
    <script type="text/javascript">
        $(document).ready(function () {
            $("#example").dataTable({
                "bProcessing": true, //DataTables载入数据时，是否显示‘进度’提示
                "aLengthMenu": [5, 10, 15], //更改显示记录数选项
                "sPaginationType": "full_numbers", //详细分页组，可以支持直接跳转到某页
                "bAutoWidth": true, //是否自适应宽度
                //"bJQueryUI" : true,
                "oLanguage": { //国际化配置
                    "sProcessing": "正在获取数据，请稍后...",
                    "sLengthMenu": "显示 _MENU_ 条",
                    "sZeroRecords": "没有您要搜索的内容",
                    "sInfo": "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
                    "sInfoEmpty": "记录数为0",
                    "sInfoFiltered": "(全部记录数 _MAX_ 条)",
                    "sInfoPostFix": "",
                    "sSearch": "搜索",
                    "sUrl": "",
                    "oPaginate": {
                        "sFirst": "第一页",
                        "sPrevious": "上一页",
                        "sNext": "下一页",
                        "sLast": "最后一页"
                    }
                },
            });
        });
    </script>

</rapid:override>

<%@include file="/jsp/common/admin/base.jsp"%>
